<template>
  <div class="login">
    <el-form :model="userData" :rules="rules" ref="form" v-loading="isLogin">
       <h2>用户登录</h2>
      <el-form-item prop="userAccount">
        <label for="userAccount">用户名</label>：
        <el-input id="userAccount" v-model="userData.userAccount" clearable>
          <template slot="prefix">
            <i class="el-icon-user"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="userPassword">
        <label for="userPassword">密码</label>：
        <el-input id="password" v-model="userData.userPassword" show-password>
          <template slot="prefix">
            <i class="el-icon-menu"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitForm('ruleForm')" type="primary"
          >登录</el-button
        >
        <el-button @click="handleReg()" type="primary">注册</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <span><a href="">忘记账号</a></span>
        <span style="margin: 0 15px">|</span>
        <span><a href="">忘记密码</a></span>
      </el-form-item> -->
    </el-form>
    <Modal v-show="isLoading"><Center><Loading v-show="isLoading"/></Center></Modal>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import Loading from '@/components/Loading.vue'
import Modal from '@/components/Modal.vue'
import Center from '@/components/Center.vue'
export default {
  components:{Loading,Modal,Center},
  data() {
    return {
      isLoading:false,
      userData: {
        userAccount: "",
        userPassword: "",
      },
      isLogin: false,
      rules: {
        userAccount: [
          {
            required: true,
            min: 3,
            max: 6,
            message: "请输入3到6位的用户名",
            trigger: "blur",
          },
        ],
        userPassword: [
          {
            required: true,
            min: 4,
            max: 9,
            message: "请输入4到9位的密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleReg() {
      this.$router.push({ name: "Register" });
    },

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.isLoading = true;
          this.$store.dispatch("loginUser/login", this.userData)
            .then((resp) => {
              // console.log(resp);
              if (resp) {
                this.$router.push({ name: "Home" });
                this.$message.success("登录成功！",2000);
              } else {
                this.$message.error("用户名或密码错误！");
                // window.location.reload();
              }
                this.isLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background: rgb(206, 200, 200);
  background: url(../assets/zc.png) no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .el-form {
    padding: 15px 70px 0 70px;
    background: #fff;
    background-color:rgba(211, 208, 208, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
    h2 {
      font-size: 20px;
      margin-bottom: 35px;
     
    }
    .el-input {
      width: 200px;
    }
    label {
      width: 50px;
      display: inline-block;
      text-align: justify;
      text-align-last: justify;
    }
    .el-form-item {
      width: 100%;
      text-align: right;
      & /deep/ .el-form-item__error {
        left: 69px;
      }
    }
    .el-button{
      width:70px;
    }
  }
}
</style>
